<template>
  <div id="app" :style="{ height: '100%' }">
    <router-view />
  </div>
</template>
<script>
export default {
  date () {
    return {
    }
  },
  methods: {
    getHeight () {
      console.log('innerHeight' + this.innerHeight)
      this.$store.commit('updateInnerHeight', window.innerHeight)
      this.$store.commit('updateInnerWidth', window.innerWidth)
    }
  },
  created () {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  destroyed () {
    window.removeEventListener('resize', this.getHeight)
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  box-sizing: border-box;
  overflow-x: hidden;
}
</style>

<style>
    *{
       margin: 0
    }
    ::-webkit-scrollbar {
      width:12px;
      height:12px;
    }
    ::-webkit-scrollbar-track {
      background-color: rgb(219,219,219);
      border-radius: 4px
    }
    ::-webkit-scrollbar-thumb {
      background-color:white;
      border-radius: 4px;
      border:solid 1px rgb(219,219,219)
    }
    ::-webkit-scrollbar-thumb:hover {
      border:solid 1px rgb(171,171,171)
    }
</style>
